<template>
    <!-- 首页推荐 -->
    <div class="homeRecommend">
        <!-- 列表内容 -->
        <div class="infoList">
            <li v-for="(item,index) in infoData" :key="index">
                <!-- 列表图片 -->
                <div class="cardImg">
                    <a href="#">
                        <img :src="item.pic" alt="图片卡片">
                    </a>
                </div>
                <!-- 列表中间信息 -->
                <div class="info_c">
                    <div class="row1">
                        <p>
                            <a href="#">{{item.name}}</a>
                        </p>
                    </div>
                    <div class="row2">
                        <p>{{item.type}}</p>
                    </div>
                    <div class="row3">
                        <img :src="liulan" alt="浏览记录">
                        <span>{{item.product_redu1}}</span>
                        &nbsp;<img :src="pinlun" alt="评论">
                        <span>{{item.product_redu2}}</span>
                        &nbsp;<img :src="dianzan" alt="点赞">
                        <span>{{item.product_redu3}}</span>
                    </div>
                </div>
                <!-- 列表下方信息 -->
                <div class="info_bottm">
                    <div class="bot_l">
                        <a href="#">
                            <img :src="item.author_pic" alt="">
                            <span>{{item.author}}</span>
                        </a>
                        <!-- 作者信息 -->
                        <div class="author">
                            <!-- 第一行 -->
                            <div class="row1">
                                <div class="col1">
                                    <a href="#"><img :src="item.author_pic" alt=""></a>
                                </div>
                                <div class="col2">
                                    <a href="#"><p>{{item.author}}</p></a>
                                    <p>{{item.author_det[0].city}}&nbsp;|&nbsp;{{item.author_det[0].work}}</p>
                                </div>
                                <div class="col3">
                                    <a href="#">
                                        <span>关注</span>
                                    </a>
                                </div>
                            </div>
                            <!-- 第二行 -->
                            <div class="row2">
                                <li>
                                    <a href="#">
                                        <img :src="item.author_det[0].product" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img :src="item.author_det[0].product" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img :src="item.author_det[0].product" alt="">
                                    </a>
                                </li>
                            </div>
                            <!-- 第三行 -->
                            <div class="row3">
                                <a href="#">
                                    <img src="../assets/info_img/redu.png" alt="pic">&nbsp;
                                    <p>{{item.author_det[0].author_redu1}}</p>&nbsp;&nbsp;
                                    <img src="../assets/info_img/tupian.png" alt="pic">&nbsp;
                                    <p>{{item.author_det[0].author_redu2}}</p>&nbsp;&nbsp;
                                    <img src="../assets/info_img/guanzhu.png" alt="pic">&nbsp;
                                    <p>{{item.author_det[0].author_redu3}}</p>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="bot_r">{{item.time}}</div> 
                </div>
            </li>
        </div>
        <!-- 数据为空 -->
        <div class="isnull" v-show="isNow">
            <p>没有数据了，想看自己写！</p>
        </div>
        <!-- 页码 -->
        <div class="pagenumber">
            <div class="page_nav">
                <li v-for="(item,index) in pageId" :key="index" @click="goList(item.id,index)">
                    <a href="javascript:void(0)" :class="{isIt:item.isNow}">{{item.id}}</a>
                </li>
            </div>
        </div>
        <page-section></page-section>
    </div>
</template>
<style lang="scss" scoped>
// 内容为空
.isnull{
    width: 100%;
    height: 600px;
    background-color: #d3d3d3;
    p{
        font-size: 20px;
        font-weight: 500;
        color: black;
        line-height: 600px;
    }
}
// 作者信息
.isIt{
    color: #333333;
    background-color: #FFF200;
}
.homeRecommend{
    width: 100%;
    background-color: rgb(244, 244, 244);
    .infoList{
        width: 74%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li{
            margin-top: 20px;
            width: 260px;
            height: 345px;
            background-color: rgb(255, 255, 255);
            border-radius: 5px;
            // 卡片头部
            .cardImg{
                width: 100%;
                height: 195px;
                border-radius: 5px 5px  0px 0px;
                overflow: hidden;
                img{
                    width: 100%;
                    transform: all 1.5s;
                }
                img:hover{
                    opacity: 0.8;
                }
            }
            // 卡片中间
            .info_c{
                width: 260px;
                height: 100px;
                .row1{
                    padding-left: 13px;
                    padding-top: 10px;
                    p{
                        text-align: left;
                        width: 100%;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                        a{
                            font-size: 14px;
                            color: #333333;
                        }
                        a:hover{
                            color: #f88b6a;
                        }
                    }
                }
                .row2{
                    height: 18px;
                    padding-left: 13px;
                    padding-top: 5px;
                    p{
                        font-size: 12px;
                        color: #BBBBBB;
                        text-align: left;
                    }
                }
                .row3{
                    height: 17px;
                    line-height: 17px;
                    padding-left: 13px;
                    padding-top: 25px;
                    display: flex;
                    justify-content: flex-start;
                    img{
                        width: 16px;
                        height: 16px;
                    }
                    span{
                        color: #BBBBBB;
                        font-size: 12px;
                        margin: 0px 0px 0px 5px;
                    }
                }
            }
            // 列表下方数据
            .info_bottm{
                width: 260px;
                height: 49px;
                border-top: 1px solid #d3d3d3;
                display: flex;
                .bot_l{
                    width: 60%;
                    height: 24px;
                    padding: 13px 0px 10px 15px;
                    position: relative;
                    // 作者信息
                    .author{
                        position: absolute;
                        display: none;
                        width: 300px;
                        height: 160px;
                        left: 0px;
                        top: -200px;
                        background-color: white;
                        z-index: 888;
                        padding: 20px;
                        border-radius: 6px;
                        box-shadow: 0px 0px 10px 1px rgb(194, 191, 191);
                        .row1{
                            width: 100%;
                            height: 45px;
                            background-color: #fffcfb;
                            display: flex;
                            position: relative;
                            .col1{
                                a{
                                    img{
                                        width: 45px;
                                        height: 45px;
                                        border-radius: 50%;
                                    }
                                }
                            }
                            .col2{
                                margin-left: 10px;
                                a{
                                    p{
                                        
                                        font-size: 15px;
                                        color: black;
                                    }
                                    p:hover{
                                        color: #f88b6a;
                                    }
                                }
                                .pp1{
                                    width: 60px;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-align: left;
                                }
                                p{
                                    font-size: 13px;
                                    color: #999999;
                                }
                            }
                            .col3{
                                a{
                                    span{
                                        width: 70px;
                                        height: 30px;
                                        padding: 0px;
                                        font-size: 15px;
                                        line-height: 30px;
                                        background-color: #FFF200;
                                        border-radius: 5px;
                                        position: absolute;
                                        right: 0px;
                                        top: 7px;
                                    }
                                    span:hover{
                                        background-color: #fab463;
                                        color: black;
                                        transition: all 0.8s;
                                    }
                                }
                            }
                        }
                        .row2{
                            width: 100%;
                            height: 75px;
                            display: flex;
                            justify-content: space-between;
                            li{
                                width: 30%;
                                height: 100%;
                                a{
                                    width: 100%;
                                    height: 100%;
                                    display: block;
                                    img{
                                        border-radius: 5px;
                                        width: 100%;
                                        height: 100%;
                                    }
                                    img:hover{
                                        opacity: 0.8;
                                        transition: all 0.8s;
                                    }
                                }
                            }
                        }
                        .row3{
                            width: 100%;
                            height: 20px;
                            margin-top: 25px;
                            a{
                                display: block;
                                display: flex;
                                img{
                                    width: 16px;
                                    height: 16px;
                                }
                                p{
                                    font-size: 12px;
                                    line-height: 16px;
                                    color: #BBBBBB;
                                }
                                p:hover{
                                    color: #f88b6a;
                                }
                            }
                        }
                    }

                    a{
                        display: block;
                        line-height: 24px;
                        display: flex;
                        justify-content: flex-start;
                        img{
                            width: 24px;
                            height: 24px;
                            border-radius: 50%;
                        }
                        span{
                            display: block;
                            height: 24px;
                            font-size: 12px;
                            color: #333333;
                            padding-left: 10px;
                        }
                    }
                    a:hover >span{
                            color: #f88b6a;
                    }
                }
                .bot_l:hover .author{
                    display: block;
                }
                .bot_r{
                    width: 40%;
                    font-size: 12px;
                    color: #BBBBBB;
                    line-height: 50px;
                }
            }
        }
    }
    // 页码
    .pagenumber{
        width: 74%;
        height: 40px;
        margin-top: 35px;
        margin-left: auto;
        margin-right: auto;
        .page_nav{
            width: 40%;
            margin: auto;
            height: 50px;
            display: flex;
            justify-content: space-between;
            li{
                width: 40px;
                height: 40px;
                border-radius: 5px;
                background-color: rgb(255, 255 , 255);
                a{
                    display: block;
                    border-radius: 5px;
                    width: 100%;
                    height: 100%;
                    line-height: 40px;
                    font-size: 14px;
                    color: #999999;
                }
                a:hover{
                    color: #333333;
                    background-color: #FFF200;
                }
            }
        }
    }
}
</style>

<script>
import {reactive, ref} from 'vue'
import PageSection from '@/components/PageSection.vue'
export default { 
    name:"HomeRecommend",
    components:{
        PageSection,
    },
    // 父传子
    props:{
        infoData:{
            type:Array,
            require:true
        },
        isNow:{
            type:Boolean
        }
    },
    // 子传父
    methods:{
        goList(listId,index){
            this.$emit('golist',listId)
            this.pageId.forEach((item)=>{
                item.isNow = false
            })
            this.pageId[index].isNow = true
        }
    },
    setup(){
        // 三个小图标
        let liulan  = ref(require('../assets/info_img/liulan.png'))
        let pinlun = ref(require('../assets/info_img/pinlun.png'))
        let dianzan = ref(require('../assets/info_img/dianzan.png'))
        // 页码
        let pageId = reactive([
            {"id":"1","isNow":true},
            {"id":"2","isNow":false},
            {"id":"3","isNow":false},
            {"id":"4","isNow":false},
            {"id":"5","isNow":false},
            {"id":"6","isNow":false},
            {"id":"7","isNow":false},
            {"id":"8","isNow":false},
            {"id":"···","isNow":false},
            {"id":"999","isNow":false},
        ])
        return{
            liulan,
            pinlun,
            dianzan,
            pageId
        }
    }
}
</script>